/**
 * 封装的运动函数
 * @param {Object} ele 运动的元素
 * @param {Object} styleObj 目标样式对象
 * @param {Function} fn 运动接后执行的函数
 */
function move(ele, styleObj, fn) {
  let timerObj = {};
  for (const attr in styleObj) {
    let curStyle;
    if (attr === 'opacity') {
      curStyle = getStyle(ele, attr) * 100;
      styleObj[attr] = styleObj[attr] * 100;
    } else {
      curStyle = parseInt(getStyle(ele, attr));
    }
    timerObj[attr] = setInterval(() => {
      let goLength = (styleObj[attr] - curStyle) / 10;
      goLength = goLength > 0 ? Math.ceil(goLength) : Math.floor(goLength);
      curStyle += goLength;
      if (curStyle === styleObj[attr]) {
        clearInterval(timerObj[attr]);
        delete timerObj[attr];
        Object.keys(timerObj).length === 0?fn():'';
      } else {
        ele.style[attr] = attr==='opacity'?curStyle/100:curStyle+'px';
      }
    }, 20)
  }
}
/**
 * 封装获取元素样式的函数
 * @param {Object} ele  要获取样的元素
 * @param {String} style 获取的演示名称
 * @return {String}  返回元素对应的样式值
 */
function getStyle(ele, style) {
  try {
    return window.getComputedStyle(ele)[style];
  } catch (error) {
    return ele.currenStyle[style];
  }
}